/*
  学习目标： PureComponent
  源码内部使用的是浅比较

*/

import React from 'react';
export default class App extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  handleClick = () => {
    // ❌ 不推荐的写法
    // this.state.list.push(4);
    // this.setState({list: this.state.list});

    // ✅ 新值覆盖旧值
    this.setState({
      list: [...this.state.list, 4],
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我修改list</button>
        <Footer list={this.state.list}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  componentDidUpdate() {
    console.log('Footer被更新了  ----->  ');
  }

  shouldComponentUpdate(nextProps) {
    console.log('nextProps.list  ----->  ', nextProps.list);
    console.log('this.props.list  ----->  ', this.props.list);
    if (nextProps.list !== this.props.list) {
      return true;
    }
    return false;
  }

  render() {
    return <div>我是Footer - </div>;
  }
}
